<template>
  <div>
      <van-nav-bar
        title="标题"
        right-text="管理"
        left-text=""
        left-arrow
      />
  </div>
  <div>
    <template v-for="item in plastic" :key="item.shopid">
      <div style="margin:15px auto;width:90%;background-color:#fff">
        <div>
          <van-checkbox 
            v-model="item.shopid" checked-color="#ee0a24" 
            style="display:inline-block;vertical-align:middle">
          </van-checkbox>
          <span style="margin-left:10px">华睿整形医院></span>
        </div>
        <van-divider style="margin-top:15px"/>
        <div style="height: 100px;position: relative;">
          <div style="float: left;line-height: 80px;">

            <van-checkbox  checked-color="#ee0a24"
              v-model="item.shopid" 
              style="display:inline-block;vertical-align:middle">
            </van-checkbox>
          </div>
          <div style="float: left; width: 25%;height: 100%; margin-left: 10px;">
            <img src="@/assets/img/carimg.jpg"/>
          </div>
          <div style="float: left; width: 60%;margin-left: 10px;">
            <p>【水光针】水光针/皮肤修正/祛痘嫩肤/皮肤清洁</p>
            <p style="font-size: 14px; color:#cccccc">基础套餐</p>
            <p style="color:red">￥299</p>
          </div>
          <div style="position: absolute;right: 0px;bottom: 0px;">
            <van-stepper v-model="value" theme="round" button-size="15"/>
          </div>
        </div>
      </div>
    </template>
    <div style="text-align: center; height: 70px;line-height: 70px; font-size: 20px;">
      <span>猜你喜欢</span>
    </div>
  </div>
  <template v-for="it in shopping" :key="it.shopid">
    <div style="width: 42%; height: auto; margin: 20px 3%; float: left;">
      <div style="width:100%;height: auto;">
        <img class="im" :src="it.img"/>
      </div>
      <p>{{it.shopname}}</p>
      <span class="sp">特惠</span>
      <span class="sp" style="margin-left: 10px;">秒杀</span>
      <p style="color:red;font-size: 20px;">￥{{it.price}}</p>
      <p style="color:#ccc;font-size: 14px;">李明金，北京华睿整形</p>
    </div>
  </template>
  <div style="width: 100%; height: 70px;line-height: 70px; position: fixed;bottom: 0; background-color: white;">
    <van-checkbox 
      v-model="checked" checked-color="#ee0a24" 
      style="display:inline-block;vertical-align:middle">
    </van-checkbox>
    <span style="margin-left: 20px;">全选</span>
    <span style="margin-left: 25%;">总计：</span>
    <span style="color:#ec7b67">0.00</span>
    <button style="color:white;background-color: #ec7b67;border: none; width: 90px;height: 35px;line-height: 35px; border-radius: 10%;">去结算(0)</button>
  </div>
</template>

<script setup lang="ts">
  import {ref,onMounted} from 'vue'
  import {getshopcar,guesslike} from '@/api/shopcar.js'
  let value=ref(0)
  let plastic = ref([
    {shopid:1},
    {shopid:2},
    {shopid:3}
  ])


  //商品数据
  let shopping = ref([])
  onMounted(()=>{
    getshopcar()
    .then(res=>{
      shopping.value = res.data.shop
      console.log(shopping.value)
    })
  })
    
 let checked = ref('')
</script>
<style scoped>
   .im{
    width: 100%;
   }
   .sp{
      border: 1px solid #ec7b67;
      color: #ec7b67;
   }
</style>